<template>
  <div class="news">
    <van-sticky>
      <van-nav-bar
          title="我的收藏列表"
          left-arrow
          @click-left="onClickLeft"
      />
    </van-sticky>
    <div class="collect-bg">
      <h2>我的收藏</h2>
    </div>
    <div>
      <NewsItem :newsList="list" :uid="uid" isType="collect" @cancel="cancelItem"></NewsItem>
    </div>
  </div>
</template>

<script setup lang="ts">
import NewsItem  from '../components/NewsItems.vue'
import {getCollectNewsList} from '../api/news'
import {ref,reactive,toRefs} from "vue";
const state = reactive({
  list:[],
  uid:''
})
let {list,uid} = toRefs(state)
uid = JSON.parse(localStorage.getItem('id'))
import {useRouter} from "vue-router";

const router =useRouter()
const onClickLeft =() =>{
  router.back()
}
const collectList = async (uid)=>{
  let response = await getCollectNewsList(uid)
  list.value = response.data.collectInfo
  console.log(list.value)
}
collectList(uid)
</script>

<style scoped lang="less">
.news {
  margin-bottom: 1.5rem;
}
.collect-bg {
  width: 100%;
  height: 1.5rem;
  background: #654ea3;
  background: -webkit-linear-gradient(to right, #eaafc8, #654ea3);
  background: linear-gradient(to right, #eaafc8, #654ea3);
  > h2 {
    font-size: 28px;
    color: #fff;
    line-height: 1.5rem;
    padding-left: 0.2rem;
  }
}
</style>
